import React, {
    useState,
    useLayoutEffect,
    useEffect
} from "react";
import Modal from "../modal";
import { message, Popover } from "antd";
import Scrollbars from "react-custom-scrollbars";
import { Loading } from "../../../component/common";
import GroupOne from "./groupOne";
import $ from "jquery";
import fetch from "@/util/fetch";
import "./index.scss";
/**
 * 使用该组件时需要在sessionStorage里存储几个公共信息，schoolType, schoolId, baseUrl, userType
 * 
 * visible 控制显隐的变量
 * width 弹窗宽度
 * height 弹窗高度
 * title 弹窗标题
 * changeVisible  控制显隐的函数
 * originList  传入已选择的用户列表数组
 * getList  获取选择的用户列表函数【每个对象必须包含groupType】
 * hiddenModule: ["stu", "tea", "parent", "admin", "org"] 手动隐藏目录
 * 
 */

/**
 * type: user(用户), grade(年级), class(班级), group(教师/教研组), identity(管理员身份), org(部门)
 * groupType: admin(管理员), tea(教师), stu(学生), parent(家长), org(部门)
 * 
 */
const groupTypeInfo = {
    "admin": "管理员",
    "tea": "教师",
    "stu": "学生",
    "parent": "家长",
    "myClass": "学生",
    "classParent": "家长",
    "myGroup": "教师",
    "org": "部门"
}
const _sysId = 410;
function SelectModal(props){
    let {
        visible,
        width,
        height,
        title,
        changeVisible,
        hiddenModule,
        originList,
        getList,
        userType
    } = props;

    width = width? width: 900;
    height = height? height: 592;

    const [selectList, setSelectList] = useState([]);
    const [searchList, setSearchList] = useState([]);
    const [keyword, setKeyword] = useState("");
    const [searchVisible, setSearchVisible] = useState(false);
    const [searchLoad, setSearchLoad] = useState(false);
    const [groupList, setGroupList] = useState([
        {
            name: "管理员",
            id: "admin",
            check: 0,
            floorNum: 1
        },
        {
            name: "教师",
            id: "tea",
            check: 0,
            floorNum: 1
        },
        {
            name: "学生",
            id: "stu",
            check: 0,
            floorNum: 1
        },
        {
            name: "家长",
            id: "parent",
            check: 0,
            floorNum: 1
        },
        {
            name: "我的班级",
            id: "stu",
            check: 0,
            exact: "myClass",
            floorNum: 1
        },
        {
            name: "学生家长",
            id: "parent",
            check: 0,
            exact: "myParent",
            floorNum: 1
        },
        {
            name: "我的教师组",
            id: "tea",
            check: 0,
            exact: "myGroup",
            floorNum: 1
        },
        {
            name: "学校组织结构",
            id: "org",
            check: 0,
            floorNum: 1
        },
    ]);

    const [selectAll, setSelectAll] = useState(0);
    const [childList, setChildList] = useState([]);
    const [allChildList, setAllChildList] = useState([]);
    const [groupInfo, setGroupInfo] = useState({});
    const [groupVisible, setGroupVisible] = useState(false);
    //搜索用户
    const searchUserMethod = () => {
        clearTimeout(window.sign);
        window.sign = setTimeout(() => {
            if(!keyword){
                return;
            }
            setSearchLoad(true);
            let baseUrl = sessionStorage.getItem("baseUrl");
            let url = baseUrl + "BaseApi/UserMgr/UserInfoMgr/SearchUserByIDsOrName";
            fetch
            .get({url, params: {
                appid: "410",
                access_token: "2e9813e2708ae9e4dfc1508c4e6c8601",
                schoolId: sessionStorage.getItem("schoolId"),
                userName: keyword
            }})
            .then(res=>res.json())
            .then((result)=>{
                if(Array.isArray(result.Data)){
                    let arr = [];
                    let typeInfo = {
                        "stu": "2",
                        "tea": "1",
                        "parent": "3",
                        "admin": "0"
                    }
                    let typeList = [];
                    Array.isArray(hiddenModule) &&
                    hiddenModule.forEach((item)=>{
                        typeList.push(typeInfo[item]);
                    })
                    result.Data.forEach((item)=>{
                        if(typeList.includes(item.UserType)){
                            return;
                        }
                        item.id = item.UserID;
                        item.userId = item.UserID;
                        item.userName = item.UserName;
                        item.name = item.UserName;
                        item.avatarPath = item.AvatarPath;
                        item.groupType = item.UserType == 1? "tea": item.UserType == 2? "stu": item.UserType == 3? "parent": "admin";
                        arr.push(item);
                    })
                    if(arr.length > 100){
                        arr.splice(100,);
                    }
                    setSearchList(arr);
                }
                setSearchLoad(false);
            });
        }, 300);
    }
    //选择用户
    const selectMethod = (data, e, type, addKind) => { 
        e && e.stopPropagation();
        let list = JSON.parse(JSON.stringify(selectList));
        if(type === "list"){
            let arr = [];
            data.forEach((item)=>{
                let sign = false;
                let dataId = (item.groupType? item.groupType + "_": "") + (item.exact? item.exact + "_": "") + item.id
                list.forEach((child, index)=>{
                    let childId = (child.groupType? child.groupType + "_": "") + (child.exact? child.exact + "_": "") + child.id
                    if(childId === dataId){
                        if(child.majorId && child.majorId !== item.majorId){
                            sign = false;
                        } else {
                            sign = index;
                        }
                        
                    }
                })
                if(typeof sign === "number"){
                    if(addKind === "add"){
                        return;
                    }
                    list.splice(sign, 1);
                } else {
                    list.push(item);
                }
            })
            setSelectList(list);
            return;
        }
        let dataId = (data.groupType? data.groupType + "_": "") + (data.exact? data.exact + "_": "") + data.id;
        if(data.type === "user"){
            dataId = data.id;
        }
        let sign = false;
        list.forEach((item, index)=>{
            let allId = (item.groupType? item.groupType + "_": "") + (item.exact? item.exact + "_": "") + item.id;
            if(data.type === "user"){
                allId = item.id;
            }
            if(allId === dataId){
                if(data.majorId && data.majorId !== item.majorId){
                    sign = false;
                } else if(data.identityCode && data.identityCode !== item.identityCode){
                    sign = false;
                } else {
                    sign = index;
                }
            }
        })
        if(type === "add" && typeof sign === "number"){
            message.warn("该用户已被选择");
            return;
        }
        if(type === "add"){
            data.type = "user";
            setKeyword("");
        }
        if(typeof sign === "number"){
            list.splice(sign, 1);
        } else {
            list.push(data);
        }
        setSelectList(list);
    }
    //凸显搜索文字
    const highlightKey = (str) => {
        let arr = str.toString().split(keyword);
        let updateArr = [];
        arr.forEach((item, index)=>{
            if(index === arr.length - 1){
                updateArr.push(item);
            } else {
                updateArr.push(item);
                updateArr.push(
                    <span style={{color: "#0099ff"}}>{keyword}</span>
                )
            }
        })
        return updateArr;
    }
    //删除指定用户
    const deleteSelect = (index, type) => {
        if(type === "clear"){
            setSelectList([]);
            return;
        }
        let list = JSON.parse(JSON.stringify(selectList));
        list.splice(index, 1);
        setSelectList(list);
    }
    const confirmMethod = () => {
        //格式化返回对象，便于直接传参
        let obj = {
            teachers: [],
            students: [],
            departments: [],
            identities: [],
            parents: [],
            persons: [],
            allList: [],
            groupList
        };
        selectList.forEach((item)=>{
            if(item.type === "user"){
                obj.persons.push(item);
                return;
            }
            if(item.groupType === "stu" || item.groupType === "myClass"){
                let groupOne = {};
                switch (item.type){
                    case "class": 
                        groupOne = {
                            ...item,
                            classId: item.id,
                            className: item.name
                        }
                        break;
                    case "stuClass": 
                        groupOne = {
                            ...item,
                            classId: item.id,
                            className: item.name
                        }
                        break;
                    case "grade": 
                        groupOne = {
                            ...item,
                            gradeId: item.id,
                            gradeName: item.name
                        }
                        break;
                    case "college":
                        groupOne = {
                            ...item,
                            collegeId: item.id,
                            collegeName: item.name
                        }
                        break;
                    case "major":
                        groupOne = {
                            ...item,
                            majorId: item.id,
                            majorName: item.name
                        }
                        break;
                    default: 
                        break;
                }
                obj.students.push(groupOne);
                return;
            }
            if(item.groupType === "parent" || item.groupType === "classParent"){
                let groupOne = {};
                switch (item.type){
                    case "class": 
                        groupOne = {
                            ...item,
                            classId: item.id,
                            className: item.name
                        }
                        break;
                    case "parentClass": 
                        groupOne = {
                            ...item,
                            classId: item.id,
                            className: item.name
                        }
                        break;
                    case "grade": 
                        groupOne = {
                            ...item,
                            gradeId: item.id,
                            gradeName: item.name
                        }
                        break;
                    case "college":
                        groupOne = {
                            ...item,
                            collegeId: item.id,
                            collegeName: item.name
                        }
                        break;
                    case "major":
                        groupOne = {
                            ...item,
                            majorId: item.id,
                            majorName: item.name
                        }
                        break;
                    default: 
                        break;
                }
                obj.parents.push(groupOne);
                return;
            }
            if(item.groupType === "tea" || item.groupType === "myGroup"){
                let groupOne = {};
                if(sessionStorage.getItem("schoolType") == 2){
                    groupOne = {
                        ...item,
                        subjectId: item.id,
                        subjectName: item.name
                    }
                } else {
                    switch(item.type){
                        case "college":
                            groupOne = {
                                ...item,
                                collegeId: item.id,
                                collegeName: item.name
                            }
                            break;
                        default:
                            groupOne = {
                                ...item,
                                groupId: item.id,
                                groupName: item.name
                            }
                            break;
                    }
                }
                obj.teachers.push(groupOne);
                return;
            }
            if(item.groupType === "admin"){
                obj.identities.push({
                    ...item,
                    identityCode: item.id,
                    identityName: item.name
                });
                return;
            }
            if(item.groupType === "org"){
                obj.departments.push({
                    ...item,
                    departmentId: item.id,
                    departmentName: item.name
                });
                return;
            }
        })
        obj.allList = selectList;
        typeof getList === "function" &&
        getList(obj);
        cancelMethod();
    }
    const cancelMethod = () => {
        typeof changeVisible === "function" &&
        changeVisible(false);
        setSelectList([]);
        setSearchList([]);
        setGroupInfo({});
        setGroupVisible(false);
        // setAllChildList([]);
        setKeyword("");
        setSearchVisible(false);
    }
    const clearMethod = (arr) => {
        //凡是属于同一类的，并且层数大于所选分组，全部清掉
        let data = arr[0];
        let deleteList = [];
        selectList.forEach((item)=>{
            if(item.groupType !== data.groupType){
                return;
            }
            deleteList.push(item);
        })
        deleteList = deleteList.concat(arr);
        selectMethod(deleteList, "", "list");
    }
    //选择当前所有
    const selectGroup = (data, e) => {
        e.stopPropagation();
        let type = "add";
        if(!$(e.target).attr("class")){
            return;
        }
        if($(e.target).attr("class").indexOf("logo") === -1){
            let className = $(e.target).children("i").attr("class");
            type = className === "checkedlogo"? "delete": "add";
        } else {
            type = $(e.target).attr("class") === "checkedlogo"? "delete": "add";
        }
        getAllList(data, function(list){
            if(type === "add"){
                clearMethod(list);
            } else {
                selectMethod(list, "", "list");
            }
            
        });
    }
    const getAllList = (data, callback) => {
        let id = data.id;
        let exact = data.exact;
        let schoolType = sessionStorage.getItem("schoolType");
        if(exact === "myClass" || exact === "myParent"){
            let url = window.BasicProxy + "/api/commons/school/class/mine";
            fetch
            .get({url, params: {
                schoolType: sessionStorage.getItem("schoolType"),
                userId: sessionStorage.getItem("userId")
            }})
            .then(res=>res.json())
            .then((result)=>{
                if(result.code === "200" && Array.isArray(result.data)){
                    let updateList = result.data.map((item)=>{
                        return {
                            ...item,
                            id: item.classId,
                            type: id === "myClass"? "stuClass": "parentClass",
                            groupType: id,
                            name: item.className
                        }
                    })
                    callback(updateList, {
                        type: exact,
                        list: updateList
                    });
                }
            })
        }
        if(exact === "myGroup"){
            let url = window.BasicProxy + "/api/commons/school/group/mine";
            fetch
            .get({url, params: {
                schoolId: sessionStorage.getItem("schoolId"),
                schoolType: sessionStorage.getItem("schoolType"),
                userId: sessionStorage.getItem("userId")
            }})
            .then(res=>res.json())
            .then((result)=>{
                if(result.code === "200" && Array.isArray(result.data)){
                    let updateList = result.data.map((item)=>{
                        return {
                            ...item,
                            id: item.subjectId || item.groupId,
                            type: "group",
                            groupType: id,
                            name: item.subjectName || item.groupName
                        }
                    })
                    callback(updateList, {
                        type: "myGroup",
                        list: updateList
                    });
                }
            })
        }
        if(schoolType === "1"){
            if(id === "admin"){
                let url = window.BasicProxy + "/api/commons/school/identity/list";
                fetch
                .get({url, params: {
                    schoolId: sessionStorage.getItem("schoolId"),
                    userType: 0
                }})
                .then(res=>res.json())
                .then((result)=>{
                    if(result.code === "200" && Array.isArray(result.data)){
                        let updateList = result.data.map((item)=>{
                            return {
                                count: item.count || item.userCount,
                                id: item.identityCode,
                                type: "identity",
                                groupType: id,
                                name: item.identityName
                            }
                        })
                        callback(updateList, {
                            type: "admin",
                            list: updateList
                        });
                    }
                })
            }
            if(id === "tea"){
                let url = window.BasicProxy + "/api/commons/school/college/list";
                fetch
                .get({url, params: {
                    schoolId: sessionStorage.getItem("schoolId"),
                    identityType: 1
                }})
                .then(res=>res.json())
                .then((result)=>{
                    if(result.code === "200" && Array.isArray(result.data)){
                        let updateList = result.data.map((item)=>{
                            return {
                                count: item.count,
                                id: item.collegeId,
                                type: "college",
                                groupType: id,
                                name: item.collegeName
                            }
                        })
                        callback(updateList, {
                            type: "college",
                            list: updateList
                        });
                    }
                })
            }
            if(id === "stu" || id === "parent"){
                let url = window.BasicProxy + "/api/commons/school/college/list";
                fetch
                .get({url, params: {
                    schoolId: sessionStorage.getItem("schoolId"),
                    identityType: 1
                }})
                .then(res=>res.json())
                .then((result)=>{
                    if(result.code === "200" && Array.isArray(result.data)){
                        let updateList = result.data.map((item)=>{
                            return {
                                count: item.count,
                                id: item.collegeId,
                                type: "college",
                                groupType: id,
                                name: item.collegeName
                            }
                        })
                        callback(updateList, {
                            type: "college",
                            list: updateList
                        });
                    }
                })
            }
            if(id === "org"){
                let url = window.BasicProxy + "/api/commons/school/department/list";
                fetch
                .get({url, params: {
                    sysId: "410",
                    departmentId: "",
                    schoolId: sessionStorage.getItem("schoolId")
                }})
                .then(res=>res.json())
                .then((result)=>{
                    if(result.code === "200" && Array.isArray(result.data)){
                        let updateList = result.data.map((item)=>{
                            return {
                                ...item,
                                id: item.departmentId,
                                type: "org",
                                groupType: id,
                                name: item.departmentName
                            }
                        })
                        callback(updateList, {
                            type: "org",
                            list: updateList
                        });
                    }
                })
            }
            return;
        }
        if(id === "admin"){
            let url = window.BasicProxy + "/api/commons/school/identity/list";
            fetch
            .get({url, params: {
                schoolId: sessionStorage.getItem("schoolId"),
                userType: 0
            }})
            .then(res=>res.json())
            .then((result)=>{
                if(result.code === "200" && Array.isArray(result.data)){
                    let updateList = result.data.map((item)=>{
                        return {
                            count: item.count || item.userCount,
                            id: item.identityCode,
                            type: "identity",
                            groupType: id,
                            name: item.identityName
                        }
                    })
                    callback(updateList, {
                        type: "admin",
                        list: updateList
                    });
                }
            })
        }
        if(id === "tea" && !exact){
            let url = window.BasicProxy + "/api/commons/school/group/list";
            fetch
            .get({url, params: {
                schoolType: sessionStorage.getItem("schoolType"),
                schoolId: sessionStorage.getItem("schoolId")
            }})
            .then(res=>res.json())
            .then((result)=>{
                if(result.code === "200" && Array.isArray(result.data)){
                    let updateList = result.data.map((item)=>{
                        return {
                            count: item.count,
                            id: item.subjectId || item.collegeId,
                            type: "group",
                            groupType: id,
                            name: (item.subjectName || item.groupName) + (sessionStorage.getItem("schoolType") == 1? "教学组": "教研组")
                        }
                    })
                    callback(updateList, {
                        type: "tea",
                        list: updateList
                    });
                }
            })
        }
        if((id === "stu" || id === "parent") && !exact){
            let url = window.BasicProxy + "/api/commons/school/grade/list";
            fetch
            .get({url, params: {
                schoolType: sessionStorage.getItem("schoolType"),
                schoolId: sessionStorage.getItem("schoolId"),
                sysId: _sysId
            }})
            .then(res=>res.json())
            .then((result)=>{
                if(result.code === "200" && Array.isArray(result.data)){
                    let updateList = result.data.map((item)=>{
                        return {
                            count: item.count || item.classCount,
                            id: item.gradeId,
                            type: "grade",
                            groupType: id,
                            name: item.gradeName
                        }
                    })
                    callback(updateList, {
                        type: id,
                        list: updateList
                    });
                }
            })
        }
        if(id === "org"){
            let url = window.BasicProxy + "/api/commons/school/department/list";
            fetch
            .get({url, params: {
                sysId: "410",
                departmentId: "",
                schoolId: sessionStorage.getItem("schoolId")
            }})
            .then(res=>res.json())
            .then((result)=>{
                if(result.code === "200" && Array.isArray(result.data)){
                    let updateList = result.data.map((item)=>{
                        return {
                            ...item,
                            id: item.departmentId,
                            type: "org",
                            groupType: id,
                            name: item.departmentName
                        }
                    })
                    callback(updateList, {
                        type: "org",
                        list: updateList
                    });
                }
            })
        }
    }
    const setGroupOne = (data, e) => {
        e.preventDefault();
        setGroupInfo(data);
        setGroupVisible(true);
    }
    useLayoutEffect(()=>{
        //获取所有列表子列表
        groupList.forEach((item)=>{
            getAllList(item, function(arr, obj){
                obj.groupType = item.exact||item.id;
                allChildList.push(obj);
            })
        })
    }, []);
    useEffect(()=>{
        let group = JSON.parse(JSON.stringify(groupList));
        console.log(allChildList)
        allChildList.forEach((item)=>{
            let list = item.list.map((child)=>{
                return child.groupType + (child.exact? child.exact: "") + "_" + child.id;
            })
            let count = 0;
            let sign = false;
            selectList.forEach((child)=>{
                let childId = child.groupType + (child.exact? child.exact: "") + "_" + child.id;
                if(list.includes(childId)){
                    count++;
                }
                if(child.groupType === item.groupType){
                    sign = true;
                }
            })
            group.forEach((child)=>{
                if(child.exact && child.exact === item.groupType){
                    if(!count){   //全选
                        child.check = 0;
                        if(sign){
                            child.check = 1;
                        }
                    } else if(count < item.list.length){
                        child.check = 1;
                    } else {
                        child.check = 2;
                    }
                    return;
                }
                if(child.id === item.groupType){
                    if(!count){   //全选
                        child.check = 0;
                        if(sign){
                            child.check = 1;
                        }
                    } else if(count < item.list.length){
                        child.check = 1;
                    } else {
                        child.check = 2;
                    }
                }
            })
        })
        setGroupList(group);
    }, [selectList, groupVisible]);
    useLayoutEffect(()=>{
        searchUserMethod();
    }, [keyword]);
    useLayoutEffect(()=>{
        if(!visible){
            return;
        }
        if(Array.isArray(originList)){  //传入数组统一格式
            let list = JSON.parse(JSON.stringify(originList));
            list.forEach((item)=>{
                item.id = item.id || item.userId || item.identityCode || item.classId || item.subjectId || item.groupId || item.gradeId || item.majorId || item.collegeId;
                item.name = item.name || item.userName || item.identityName || item.className || item.subjectName || item.groupName || item.gradeName || item.majorName || item.collegeName;
            })
            setSelectList(list);
        }
    }, [visible]);
    return (
        <Modal
        width={width} 
        height={height}
        className="collect_select_modal"
        title={title? title: "选择发布对象"}
        visible={visible}
        noFooter={true}
        changeVisible={cancelMethod}>
            <div className="collect_select_container">
                <div className="collect_select_left">
                    <Scrollbars autoHeight autoHeightMax={533}>
                    <div className="select_user_list">
                        {
                            selectList.map((item, index)=>{
                                return (
                                    <div className="user_one" key={index} title={
                                        item.name + (item.userId? "(" + item.userId + ")": "")
                                    }>
                                        {item.name}
                                        {
                                            item.userId?
                                            <span style={{
                                                color: "#999"
                                            }}>({item.userId})</span>:
                                            item.groupType?
                                            <span style={{
                                                color: "#999"
                                            }}>({groupTypeInfo[item.groupType]})</span>:
                                            ""
                                        }
                                        <i className="closelogo" onClick={()=>deleteSelect(index)}></i>
                                    </div>
                                )
                            })
                        }
                        <Popover
                        placement="bottom"
                        overlayClassName="collect_search_container"
                        visible={searchVisible}
                        // getPopupContainer={(trigger)=>trigger.parentElement}
                        destroyTooltipOnHide={true}
                        content={
                            <ul className="search_list">
                                <Loading opacity={false} spinning={searchLoad} tip="搜索中...">
                                <Scrollbars autoHeight autoHeightMax={240} autoHide>
                                {
                                    searchList.length > 0?
                                    searchList.map((item, index)=>{
                                        return (
                                            <li 
                                            key={index} 
                                            onClick={(e)=>selectMethod(item, e, "add")}
                                            title={item.userName + "(" + item.userId + ")"}>
                                                <i className="user_head" style={{
                                                    backgroundImage: `url('${item.avatarPath}')`
                                                }}></i>
                                                {highlightKey(item.userName)}
                                                <span style={{color: "#999", marginLeft: 3}}>({item.userId})</span>
                                            </li>
                                        )
                                    }):
                                    <p style={{
                                        height: 100,
                                        lineHeight: "100px",
                                        textAlign: "center",
                                        color: "#999"
                                    }}>暂无搜索结果</p>
                                }
                                </Scrollbars>
                                </Loading>
                            </ul>
                        }
                        >
                        <input 
                        type="text" 
                        className="search_user_input" 
                        placeholder="按用户名搜索..." 
                        // maxLength={12}
                        value={keyword}
                        autoComplete="off"
                        onFocus={()=>setSearchVisible(true)}
                        onBlur={()=>{
                            setTimeout(() => {
                                setSearchVisible(false);
                            }, 150);
                        }}
                        onChange={(e)=>setKeyword(e.target.value)} 
                        />
                        </Popover>
                        
                    </div>
                    </Scrollbars>
                    <div className="select_btn_group">
                        <div className="confirm_btn" onClick={confirmMethod}>确定</div>
                        <div className="cancel_btn" onClick={cancelMethod}>取消</div>
                    </div>
                </div>
                {
                    groupVisible?
                    <div className="collect_select_right">
                        <GroupOne 
                        groupData={groupInfo} 
                        setGroupVisible={setGroupVisible}
                        selectMethod={selectMethod} 
                        selectList={selectList} />
                    </div>:
                    <div className="collect_select_right">
                    <Scrollbars autoHeight autoHide autoHeightMax={580}>
                        {/* <div className="group_one" onClick={setAllGroup}>
                            <span className="control_container">
                                <i className={
                                    item.check === 2?
                                    "checkedlogo":
                                    item.check === 1?
                                    "helflogo":
                                    "checklogo"
                                }></i>
                                全选
                            </span>
                        </div> */}
                        {
                            groupList.map((item, index)=>{
                                let userType = sessionStorage.getItem("userType");
                                let schoolType = sessionStorage.getItem("schoolType");
                                if(Array.isArray(hiddenModule) && hiddenModule.includes(item.id)){
                                    return "";
                                }
                                if(userType !== "1" && item.exact){
                                    return "";
                                }
                                if(schoolType === "1" && item.name === "我的教师组"){
                                    item.name = "我的教研组";
                                }
                                return (
                                    <div className="group_one" key={index} onClick={(e)=>setGroupOne(item, e)}>
                                        <span className="control_container">
                                            <i className={
                                                item.check === 2?
                                                "checkedlogo":
                                                item.check === 1?
                                                "helflogo":
                                                "checklogo"
                                            } onClick={(e)=>selectGroup(item, e)}></i>
                                            {item.name}
                                            <i className="downlogo"></i>
                                        </span>
                                    </div>
                                    
                                )
                            })
                        }
                        </Scrollbars>
                    </div>
                }
                
            </div>
        </Modal>
    )
}

export default SelectModal;